<script setup>
import IconSimple from '@/components/icon-simple/index.vue'
import {ref, watch} from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const value = ref(props.modelValue || false)

const trigger = () => {
  value.value = !value.value
}

watch(props, (newVal) => {
  if (newVal.modelValue !== value.value) {
    value.value = newVal.modelValue
  }
})

watch(value, (newVal) => {
  emit('update:modelValue', newVal)
  emit('change', newVal)
})

defineExpose({ trigger })
</script>

<template>
  <view class="checkbox-x-container" @click="trigger">
    <icon-simple v-if="value" name="yes" />
    <icon-simple v-else name="no" />
  </view>
</template>

<style scoped lang="scss">
.checkbox-x-container {
  display: inline-block;
  vertical-align: middle;
}
</style>
